<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="divWarehouseAdd">
    <div class="divForm">
      <el-form :model="formDate" class="demo-ruleForm" :rules="rules">
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item
              prop="code"
              label="仓库编码">
              <el-input  v-model="formDate.code" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="name"
              label="仓库名称">
              <el-input placeholder="请输入" v-model="formDate.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="type"
              label="仓库类型">
                <el-select placeholder="请选择" v-model="formDate.type" style="width:100%">
                <el-option label="中转仓" value="ZZ"></el-option>
            <el-option label="加工仓" value="JG"></el-option>
            <el-option label="储备仓" value="CB"></el-option>
            <el-option label="冷藏仓" value="LC"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="16">
            <el-form-item
              prop="location"
              label="省/市/区">
                <el-cascader
                  style="width:100%"
                  size="large"
                  :props="{ expandTrigger: 'hover',value: 'label' }"
                  :options="options"
                  v-model="formDate.location"
                  >
                </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="16">
            <el-form-item
              prop="address"
              label="详细地址">
                <el-input placeholder="请输入" v-model="formDate.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="status"
              label="仓库状态"
              >
                <el-radio-group style="width:100%" v-model="formDate.status">
                  <!-- <div style="width:100px"> -->
                  <el-radio :label="1" >启用</el-radio>
                  <el-radio :label="0" >停用</el-radio>
                </el-radio-group>
                <!-- </div> -->
            </el-form-item>

          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item
              prop="surface"
              label="仓库面积">
              <el-input v-model="formDate.surface"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="personName"
              label="负责人">
              <el-input placeholder="请输入" v-model="formDate.personName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="phone"
              label="联系电话">
              <el-input placeholder="请输入" v-model="formDate.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="buttonBox">
      <button class="unimportanceButton" @click="$router.push('manage')">返回</button>
      <button class="minorImportantButton" @click="addStore">提交</button>
    </div>
  </div>
</template>

<script>
// import { addStore, editstroe, getCK } from '@/api/index'
// import hireType from '@/constant/hireType'
import { regionData } from 'element-china-area-data'

export default {
  data () {
    return {
      value: 'CK001990',
      formDate: {
        code: '',
        name: '',
        status: '',
        location: '',
        type: '',
        address: '',
        phone: '',
        personName: '',
        surface: '',
        area: '',
        city: '',
        province: ''
      },
      options: regionData,

      // storeId: hireType.storeType,
      // statusId: hireType.hireType,
      rules: {
        name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
        type: [{ required: true, trigger: 'blur' }],
        location: [{ required: true, trigger: 'blur' }],
        status: [{ required: true, trigger: 'blur' }],
        personName: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
        phone: [{ min: 7, max: 11, message: '请输入正确的电话号码', trigger: 'blur' }]
      }

    }
  },
  async created () {
    // this.formDate.code
    // const { data: { data } } = await getCK()
    // this.formDate.code = data
    if (this.$route.query.id) {
      this.getDetails()
    }
  },
  methods: {
    async addStore () {
      if (this.formDate.id) {
        // this.getDetails()
        // await editstroe(this.formDate)
      } else {
        this.formDate.area = this.formDate.location[2]
        this.formDate.city = this.formDate.location[1]
        this.formDate.province = this.formDate.location[0]
        this.formDate.location = JSON.stringify(this.formDate.location.join('/'))
        // await addStore(this.formDate)
      }
      this.$message.success('恭喜你,提交成功')
      this.$router.go(-1)
      // console.log(this.formDate.location)
    },
    async getDetails () {
      // const { data: { data } } = await editstroe(this.$route.query)
      // console.log(data)
      // this.formDate = { ...data }
    }
  }
}
</script>

<style lang="less" scoped>
.el-cascader-panel{
  height: 200px;
}
.divWarehouseAdd{
  height: 509px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  padding-top: 31px;
  padding-bottom: 30px;
  .divForm{
    padding-left: 30px;
    padding-right: 30px;
    /deep/.el-form-item__label{
      font-size: 12px;
      font-family: PingFangSC,PingFangSC-Medium;
      font-weight: 500;
      color: #887e7e;
      }
    .el-input{
      background-color: #f8f5f5;
      border-color: #f3ebeb;
      width:100%;
      color: #b5abab;
      height: 40px;
      line-height: 40px;
      border: 1px solid #f8f5f5;
      border-radius: 6px;
      /deep/.el-input__inner{
        background: #f8f5f5 !important;
      }
    }
    .is-disabled{
      font-size: 14px;
      /deep/.el-input__inner{
        background: #f3ebeb !important;
      }
    }
  }
  /deep/.el-input{
  background-color: #f8f5f5;
  border-color: #f3ebeb;
  width:100%;
  color: #b5abab;
  height: 40px;
  line-height: 40px;
  border: 1px solid #f8f5f5;
  border-radius: 6px;
  .el-input__inner{
    background-color: #f8f5f5 !important;
  }
}
  .buttonBox{
    padding: 25px 0 0;
    margin: 0 -30px -5px;
    border-top: 1px solid #f5efee;
    text-align: center;
    .unimportanceButton{
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC,PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
      width: 170px;
      margin: 0 15px;
    }
    .minorImportantButton{
      background: #ffb200;
      color: #332929;
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC,PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
      width: 170px;
      margin: 0 15px;
    }
  }
}
</style>
